<template>
  <div class="register-father">
    <div class="from-logo">
      <img src="~static/images/login/login-logo.png" alt />
      <ul class="header-right">
        <li>
          已有账号，
          <router-link to="/login">马上登录</router-link>
        </li>
        <li>|</li>
        <li>
          <router-link to="/home">返回首页</router-link>
        </li>
      </ul>
    </div>

    <div class="from-content">
      <span class="welcome-login">欢迎注册</span>
      <div style="width:334px;margin:0 auto;">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="checkNumber" style="margin-top:46px;">
            <el-input
              type="text"
              prefix-icon="iconfont iconshouji-copy"
              placeholder="手机号码"
              v-model="ruleForm.checkNumber"
              :class="[isChangeBack?'isChangBack':'']"
              @focus="isChangeBack=true"
              @blur="isChangeBack=false"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <div class="ver-code">
            <el-form-item prop="verCode">
              <el-input
                type="text"
                prefix-icon="iconfont iconicon_anquan-copy"
                placeholder="验证码"
                :class="[isChangeBack1?'isChangBack':'']"
                @focus="isChangeBack1=true"
                @blur="isChangeBack1=false"
                v-model="ruleForm.verCode"
                autocomplete="off"
              ></el-input>
              <el-button
                type="info"
                v-show="verCodeShow"
                :class="ruleForm.checkNumber !== '' && (/^1(3|4|5|6|7|8|9)\d{9}$/.test(ruleForm.checkNumber)) ?  '':'errButton' "
                :disabled=" ruleForm.checkNumber !== '' && (/^1(3|4|5|6|7|8|9)\d{9}$/.test(ruleForm.checkNumber))? false : true "
                @click="submitCode(ruleForm.checkNumber)"
              >获取验证码</el-button>
              <div class="ver-show" v-show="!verCodeShow">{{content}}S后重新发送</div>
            </el-form-item>
          </div>

          <el-form-item prop="pass">
            <el-input
              type="password"
              prefix-icon="iconfont iconmima-copy"
              placeholder="输入密码/密码长度8~16位"
              v-model="ruleForm.pass"
              :class="[isChangeBack2?'isChangBack':'']"
              @focus="isChangeBack2=true"
              @blur="isChangeBack2=false"
              onpaste="return false"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input
              type="password"
              prefix-icon="iconfont iconmima-copy"
              placeholder="再次确认密码"
              v-model="ruleForm.checkPass"
              :class="[isChangeBack3?'isChangBack':'']"
              @focus="isChangeBack3=true"
              @blur="isChangeBack3=false"
              onpaste="return false"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              v-on:keyup.enter="submitForm('ruleForm')"
            >立即注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <p class="register-main-footer">©2020 南京学府教育科技有限公司 版权所有 | 备案号：苏ICP备20009837号</p>
  </div>
</template>

<script>
import { phoneCodeNoUser, lawTrainRegister } from "api/user/register.js";
import { Encrypt } from "@/utils/secret.js";
export default {
  layout: "black-layout",
  middleware: "sid-auth",
  data() {
    var validatePass3 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号码不能为空"));
      } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!/^[0-9a-zA-Z]{8,16}$/.test(value)) {
        callback(new Error("密码必须是8~16位数字或字母"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var getPhoneCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        checkPass: "",
        verCode: "",
        checkNumber: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        checkNumber: [{ validator: validatePass3, trigger: "blur" }],
        verCode: [{ validator: getPhoneCode, trigger: "blur" }]
      },
      content: 0,
      verCodeShow: true,
      isChangeBack: false,
      isChangeBack1: false,
      isChangeBack2: false,
      isChangeBack3: false
    };
  },
  mounted() {
    //this.registerBindKeyEnter();
    //this.resetForm()
  },

  methods: {
    /* 
      添加enter点击事件
    */
    // registerBindKeyEnter() {
    //   document.onkeyup = (event) => {
    //     event = event || window.event;
    //     if (event.keyCode === 13) {
    //       this.submitForm();
    //     }
    //   };
    // },

    // 立即注册按钮
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = {
            confirmUserPasswd: Encrypt(this.ruleForm.checkPass), //再次确认密码
            phone: this.ruleForm.checkNumber, //手机号
            phoneCode: this.ruleForm.verCode, //验证码
            userPasswd: Encrypt(this.ruleForm.pass) //密码
          };
          // 注册接口
          lawTrainRegister(params)
            .then(({ respCode, respMsg, result }) => {
              //console.log(result);
              if (respCode !== "0") {
                this.$message({
                  message: `注册失败，原因是:${respMsg}`,
                  type: "error"
                });
                return;
              }
              this.$router.push({ path: "/registerSuccess" });
            })
            .catch(err => {
              this.$message({
                message: `注册失败`,
                type: "error"
              });
            });
        } else {
          //console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 点击获取验证码
    submitCode(code) {
      phoneCodeNoUser({
        phone: code
      })
        .then(({ respCode, respMsg, result }) => {
          // console.log(result);
          if (respCode !== "0") {
            this.$message({
              message: `获取验证码失败，原因是:${respMsg}`,
              type: "error"
            });
            return;
          }
          this.getCode = result;
          this.verCodeShow = false; // 控制显示隐藏
          this.content = 60;
          let timeInt = setInterval(() => {
            this.content--;
            if (this.content <= 0) {
              this.verCodeShow = true;
              window.clearInterval(timeInt);
            }
          }, 1000);
        })
        .catch(err => {
          this.$message({
            message: `获取验证码失败`,
            type: "error"
          });
        });
    }
  }
};
</script>

<style lang="scss">
body {
  background: #f4f4f4;
}
.register-father {
  width: 900px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  .from-logo {
    height: 62px;
    margin: 93px 0 26px 0;
    display: flex;
    justify-content: space-between;

    .header-right {
      width: 230px;
      height: 62px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #5e5e5e;
      a {
        color: #f54305;
      }
    }
  }

  .from-content {
    width: 900px;
    height: 518px;
    margin: 0 auto;
    background: #fff;

    .welcome-login {
      font-size: 22px;
      color: #fff;
      display: block;
      height: 64px;
      background: #363636;
      text-align: center;
      line-height: 64px;
    }

    .el-form-item {
      margin-top: 20px;
      margin-bottom: 0;

      .el-input__prefix {
        left: 20px;
        color: #898280;
      }
    }

    .errButton {
      background: #eee !important;
      color: #bbbbbb !important;
      border: 0;
    }
    .el-form-item__content {
      margin-left: 0 !important;

      // .el-input__prefix{
      //   top:3px;
      // }
      .el-input__inner {
        width: 334px;
        height: 40px;
        font-size: 14px;
        padding-left: 45px;
        color: #898280;
        border: 1px solid #ddd8d4;
        background: #fafafa;
      }

      .el-button--primary {
        width: 334px;
        height: 42px;
        border-radius: 24px;
        background: linear-gradient(to right, #fc4506, #f57c4b);
        font-size: 18px;
        outline: none;
        border: 0;
        margin-top: 10px;
      }

      .el-input__validateIcon {
        color: #999;
      }

      .el-input__suffix {
        display: none;
      }
    }

    .ver-code {
      .el-input__inner {
        width: 204px;
      }
      .el-input {
        float: left;
        width: 204px;
      }
      .el-button--info {
        width: 120px;
        height: 40px;
        float: right;
        font-size: 16px;
        text-align: center;
        color: #fff;
        border: 0;
        margin-top: 0;
        background: #fc4506;
      }
      .ver-show {
        width: 120px;
        height: 40px;
        float: right;
        font-size: 16px;
        text-align: center;
        color: #bbbbbb;
        margin-top: 0;
        background: #eee;
        border-radius: 3px;
      }
    }

    .other-register {
      width: 206px;
      height: 28px;
      margin-top: 30px;
      margin-left: 283px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #666666;

      .wx-register {
        font-size: 28px;
        color: #dddddd;
        &:hover {
          color: #00bb00;
        }
      }

      .qq-register {
        font-size: 28px;
        color: #ddd;
        &:hover {
          color: #19a9f1;
        }
      }
    }
  }

  .register-main-footer {
    text-align: center;
    line-height: 74px;
    color: #999999;
    font-size: 12px;
  }

  .isChangBack {
    .el-input__inner {
      background: #ffff !important;
    }
  }
}
</style>